<template>
  <form-dialop
    :title="title"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <div v-loading="loading">
        <el-steps :active="currentStep">
          <el-step>
            <template #icon v-if="currentStep < 1">
              <div class="el-step__icon-inner">1</div>
              <div class="step-label">{{$t('resource.BasicOption')}}</div>
            </template>
            <template #icon v-else>
              <i class="el-step__icon-inner is-status el-icon-check"></i>
              <div class="step-label">{{$t('resource.Finished')}}</div>
            </template>
          </el-step>
          <el-step>
            <template #icon v-if="currentStep < 2">
              <div class="el-step__icon-inner">2</div>
              <div class="step-label">{{$t('resource.ADOption')}}</div>
            </template>
            <template #icon v-else>
              <i class="el-step__icon-inner is-status el-icon-check"></i>
              <div class="step-label">{{$t('resource.Finished')}}</div>
            </template>
          </el-step>
        </el-steps>
        <el-form ref="BasicForm" :model="basicFormData" :rules="basicFormRule" key="1" :label-width="language === 'zh' ? '120px' :'205px'" v-if="currentStep === 0">
          <el-form-item :label="$t('common.name')" prop="name">
            <el-input v-model="basicFormData.name" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('desktopManage.availabilityZone')" prop="availability_zone">
            <el-input v-model="basicFormData.availability_zone" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="'HorizonUUID'" prop="platform_uuid">
            <el-input v-model="basicFormData.platform_uuid" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.manageAddress')" prop="manage_address">
            <el-input v-model="basicFormData.manage_address" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ManageAccount')" prop="manage_account">
            <el-input v-model="basicFormData.manage_account" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ManagePassword')" prop="manage_password">
            <el-input type="password" v-model="basicFormData.manage_password" show-password @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.gatewayAddress')" prop="desktop_getaway_address">
            <el-input v-model="basicFormData.desktop_getaway_address" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ldap')" prop="api_proxy">
            <el-input v-model="basicFormData.api_proxy" @keyup.enter.native="submit"></el-input>
          </el-form-item>
        </el-form>
        <el-form ref="ADForm" :model="adFormData" :rules="adFormRule" key="2" label-width="130px" v-if="currentStep === 1">
          <el-form-item :label="$t('resource.ADController')" prop="ad_adress">
            <el-input v-model="adFormData.ad_adress" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ManagerAccount')" prop="ad_account">
            <el-input v-model="adFormData.ad_account" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ManagerPassword')" prop="ad_password">
            <el-input type="password" v-model="adFormData.ad_password" show-password @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ADDN')" prop="ad_dn">
            <el-input v-model="adFormData.ad_dn" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('resource.ADFiliter')" prop="ad_filiter">
            <el-input v-model="adFormData.ad_filiter" @keyup.enter.native="submit"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <template v-if="currentStep === 0" >
        <el-button type="primary" @click="stepToSecond">{{$t('common.NextStep') + $t('common.Colon') + $t('resource.ADOption')}}</el-button>
      </template>
      <template v-else>
        <el-button v-show="false"></el-button>
        <el-button @click="stepToFirst">{{$t('common.PrevStep') + $t('common.Colon') + $t('resource.BasicOption')}}</el-button>
        <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="submit" :disabled="loading">{{$t('common.confirm')}}</el-button>
      </template>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../store/modules/app';
import { isValidHTTPURL }  from '../../../utils/validate'
export default Vue.extend({
  components: {
    FormDialop
  },
  computed: {
    basicFormRule() {
      if ((this as any).type === "create") {
        return {
          name: [
            { required: true, message: this.$t('resource.horizonNameRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.horizonNameMax'), trigger: 'blur' }
          ],
          availability_zone: [
            { required: true, message: this.$t('desktopManage.inputAvailabilityZone'), trigger: 'blur' },
            { min: 1, max: 64, message:  this.$t('desktopManage.availabilityZoneTips'), trigger: 'blur' }
          ],
          platform_uuid: [
            { required: true, message: this.$t('desktopManage.horizonUuid'), trigger: 'blur' },
            { min: 1, max: 64, message:  this.$t('desktopManage.horizonUuidTips'), trigger: 'blur' }
          ],
          manage_address: [
            { required: true, message:  this.$t('resource.manageAddressRequired'), trigger: 'blur' },
            { max: 200, message:  this.$t('resource.manageAddressMax'), trigger: 'blur' }
          ],
          manage_account: [
            { required: true, message:  this.$t('resource.manageAccountRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.manageAccountMax'), trigger: 'blur' }
          ],
          manage_password: [
            { required: true, message:  this.$t('resource.managePasswordRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.managePasswordMax'), trigger: 'blur' }
          ],
          desktop_getaway_address: [
            { required: true, message:  this.$t('resource.manageGatewayRequired'), trigger: 'blur' },
            { max: 200, message:  this.$t('resource.manageGatewayMax'), trigger: 'blur' },
            { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && !isValidHTTPURL(value)) {
                callback(new Error(this.$t('resource.manageGateWayError').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'},
          ],
          api_proxy: [
            { max: 50, message:  this.$t('resource.adLdapMax'), trigger: 'blur' }
          ],
        }
      } else {
        return {
          name: [
            { required: true, message:  this.$t('resource.daasNameRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.daasNameMax'), trigger: 'blur' }
          ],
          availability_zone: [
            { required: true, message: this.$t('desktopManage.inputAvailabilityZone'), trigger: 'blur' },
            { min: 1, max: 64, message:  this.$t('desktopManage.availabilityZoneTips'), trigger: 'blur' }
          ],
          platform_uuid: [
            { required: true, message: this.$t('desktopManage.horizonUuid'), trigger: 'blur' },
            { min: 1, max: 64, message:  this.$t('desktopManage.horizonUuidTips'), trigger: 'blur' }
          ],
          manage_address: [
            { required: true, message:  this.$t('resource.manageAddressRequired'), trigger: 'blur' },
            { max: 200, message:  this.$t('resource.manageAddressMax'), trigger: 'blur' }
          ],
          manage_account: [
            { required: true, message:  this.$t('resource.manageAccountRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.manageAccountMax'), trigger: 'blur' }
          ],
          manage_password: [
            { required: true, message:  this.$t('resource.managePasswordRequired'), trigger: 'blur' },
            { max: 50, message:  this.$t('resource.managePasswordMax'), trigger: 'blur' }
          ],
          desktop_getaway_address: [
            { required: true, message:  this.$t('resource.manageGatewayRequired'), trigger: 'blur' },
            { max: 200, message:  this.$t('resource.manageGatewayMax'), trigger: 'blur' },
            { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && !isValidHTTPURL(value)) {
                callback(new Error(this.$t('resource.manageGateWayError').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'},
          ],
           api_proxy: [
            { max: 50, message:  this.$t('resource.adLdapMax'), trigger: 'blur' }
          ],
        }
      }
    }
  },
  props: {
    submitMethod: {
      type: Function,
      default() {
        return (formData: any) => Promise.resolve();
      }
    }
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      type: "",
      currentStep: 0,
      poolList: [],
      tenantList: [],
      poolId: "",
      id: "",
      basicFormData: {
        name: "",
        availability_zone: "",
        platform_uuid: "",
        manage_address: "",
        manage_account: "",
        manage_password: "",
        desktop_getaway_address: "",
        api_proxy: ""
      },
      adFormData: {
        ad_adress: "",
        ad_account: "",
        ad_password: "",
        ad_dn: "",
        ad_filiter: ""
      },
      adFormRule: {
        ad_adress: [
          { required: true, message:  this.$t('resource.adAddressRequired'), trigger: 'blur' },
          { max: 200, message:  this.$t('resource.adAddressMax'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
						let rules = /(ldap|ldaps):\/\/([\w.]+\/?)\S*/　;
            if (rules.test(value)) {
              return callback();
            } else {
							 return callback(new Error((this as any).$t('resource.adAddressError')))
            }
          }, trigger: 'blur' }
        ],
        ad_account: [
          { required: true, message:  this.$t('resource.adAccountRequired'), trigger: 'blur' },
          { max: 50, message:  this.$t('resource.adAccountMax'), trigger: 'blur' }
        ],
        ad_password: [
          { required: true, message:  this.$t('resource.adPasswordRequired'), trigger: 'blur' },
          { max: 50, message:  this.$t('resource.adPasswordMax'), trigger: 'blur' }
        ],
        ad_dn: [
          { required: true, message:  this.$t('resource.adDNRequired'), trigger: 'blur' },
          { max: 50, message:  this.$t('resource.adDNMax'), trigger: 'blur' }
        ],
        ad_filiter: [
          { required: true, message:  this.$t('resource.adFiliterRequired'), trigger: 'blur' },
          { max: 50, message:  this.$t('resource.adFiliterMax'), trigger: 'blur' }
        ],
      },
      language: AppModule.language,
    }
  },
  methods: {
    async init(type: string, poolId: any, formData: any) {
      console.log(type, poolId, formData)
      let that = this;
      (that as any).loading = true;
      // await that.getPoolList();
      // await that.getTenantList();
      (that as any).type = type;
      (that as any).title = type === 'edit' ? (that as any).$t('resource.editHorizon') : (that as any).$t('resource.createHorizon');
      (that as any).poolId = poolId;
      if (formData) {
        that.id = formData.id
        that.basicFormData = {
          name: formData.name,
          availability_zone: formData.availability_zone,
          platform_uuid: formData.platform_uuid,
          manage_address: formData.manage_address,
          manage_account: formData.manage_account,
          manage_password: formData.manage_password,
          desktop_getaway_address: formData.desktop_getaway_address,
          api_proxy: formData.api_proxy
        };
        that.adFormData = {
          ad_adress: formData.ad_adress,
          ad_account: formData.ad_account,
          ad_password: formData.ad_password,
          ad_dn: formData.ad_dn,
          ad_filiter: formData.ad_filiter,
        };
        that.currentStep = 0;
        that.visible = true;
      } else {
        that.basicFormData = {
          name: "",
          availability_zone: "",
          platform_uuid: "",
          manage_address: "",
          manage_account: "",
          manage_password: "",
          desktop_getaway_address: "",
          api_proxy: ""
        };
        that.adFormData = {
          ad_adress: "",
          ad_account: "",
          ad_password: "",
          ad_dn: "",
          ad_filiter: "",
        };
        that.currentStep = 0;
        that.visible = true;
      }
      (that as any).loading = false;
      this.$nextTick(() => {
        if (this.$refs['BasicForm']) {
          (this.$refs['BasicForm'] as any).clearValidate();
        }
        if (this.$refs['ADForm']) {
          (this.$refs['ADForm'] as any).clearValidate();
        }
      })
    },
    async getPoolList() {
      (this as any).poolList = await (this as any).$pandaApi.apiGetResourceList({});
    },
    async getTenantList() {
      (this as any).tenantList = await (this as any).$tunnyApi.apiGetTenantList({});
    },
    stepToSecond() {
      (this.$refs['BasicForm'] as any).validate((valid: any) => {
        if (valid) {
          (this as any).currentStep = 1;
        }
      });
    },
    stepToFirst() {
      if ((this.$refs['ADForm'] as any)) {
        (this.$refs['ADForm'] as any).clearValidate();
      }
      this.currentStep = 0
    },
    submit() {
      (this.$refs['ADForm'] as any).validate((valid: any) => {
        if (valid) {
          (this as any).loading = true;
          (this as any).submitMethod({
            id: (this as any). id,
            type: (this as any).type,
            poolId: (this as any).poolId,
            basicFormData: (this as any).basicFormData,
            adFormData: (this as any).adFormData
          }).then(() => {
            // (this as any).handleClose();
            (this as any).loading = false;
          }).finally(() => {
            (this as any).loading = false;
          });
        }
      });
    },
    handleClose() {
      this.id = "";
      this.type = "";
      this.poolId = "";
      this.basicFormData = {
        name: "",
        availability_zone: "",
        platform_uuid: "",
        manage_address: "",
        manage_account: "",
        manage_password: "",
        desktop_getaway_address: "",
        api_proxy: ""
      };
      this.adFormData = {
        ad_adress: "",
        ad_account: "",
        ad_password: "",
        ad_dn: "",
        ad_filiter: ""
      };
      this.currentStep = 0;
      this.loading = false;
      this.visible = false;
      if (this.$refs['ADForm']) {
        (this.$refs['ADForm'] as any).clearValidate();
      }
      if (this.$refs['BasicForm']) {
        (this.$refs['BasicForm'] as any).clearValidate();
      }
    }
  }
})
</script>
